<template>
  <div class="basic">
    <div>
      <!-- 第一行头像 -->
      <el-row>
        <!-- 头像 -->
        <el-col :span="6">
          <el-image
            style="width: 100px; height: 100px;border-radius: 100px;"
            src="https://upload.jianshu.io/users/upload_avatars/28127530/565b6eeb-31f5-4460-baf1-e40d61073383?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp"
          ></el-image>
        </el-col>
        <!-- 更换头像按钮 -->
        <el-col
          :span="18"
          style="height:104px;line-height:104px"
        >
          <el-button
            type="success"
            round
            plain
            class="basic_btn"
            size="small"
          >更换头像</el-button>
        </el-col>
      </el-row>
      <!-- 基础信息表单 -->
      <div style="margin-top:45px">
        <el-form
          label-width="180px"
          label-position="left"
        >
          <!-- 昵称 -->
          <el-form-item
            label="昵称"
            class="form_item"
          >
            <el-input
              v-model="nickname"
              style="width:40%"
            ></el-input>
          </el-form-item>
          <!-- 电子邮箱 -->
          <el-form-item label="电子邮箱">
            <el-button
              type="success"
              round
              plain
              size="small"
              class="basic_btn"
              @click="bindingEmail=true"
            >点击绑定</el-button>
          </el-form-item>
          <!-- 手机 -->
          <el-form-item label="手机">
            <el-button
              type="success"
              round
              plain
              size="small"
              class="basic_btn"
              @click="bindingPhone=true"
            >绑定手机</el-button>
          </el-form-item>
          <!-- 修改密码 -->
          <el-form-item label="修改密码">
            <el-button
              v-if="ischange==false"
              type="success"
              round
              plain
              size="small"
              class="basic_btn"
              @click="ischange=true"
            >修改密码</el-button>
            <el-button
              v-else
              type="info"
              round
              size="small"
              @click="ischange=false"
            >取消</el-button>
          </el-form-item>
          <!-- 原密码 -->
          <el-form-item
            label="原密码"
            v-if="ischange==true"
          >
            <el-input
              v-model="oldpwd"
              type="password"
              style="width:50%"
            ></el-input>
          </el-form-item>
          <!-- 新密码 -->
          <el-form-item
            label="新密码"
            v-if="ischange==true"
          >
            <el-input
              v-model="newpwd"
              type="password"
              style="width:50%"
            ></el-input>
            <el-button
              type="success"
              round
              plain
              size="small"
              class="basic_btn"
            >确认修改</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              round
              style="width:150px"
            >保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 绑定邮箱 -->
    <el-dialog
      title="绑定邮箱"
      :visible.sync="bindingEmail"
      width="30%"
    >
      <el-form>
        <el-form-item style="border:0px">
          <el-input
            v-model="email"
            placeholder="请输入你的常用邮箱"
            prefix-icon="el-icon-message"
          >
          </el-input>
          <el-input
            v-model="emailcode"
            placeholder="验证码"
            prefix-icon="el-icon-chat-dot-square"
          >
            <el-button slot="append">发送验证码</el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="border:0px;margin-bottom:0px">
          <el-button
            type="primary"
            style="width:100%"
            round
          >确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 绑定手机号码 -->
    <el-dialog
      title="绑定手机"
      :visible.sync="bindingPhone"
      width="30%"
    >
      <el-form>
        <el-form-item style="border:0px">
          <el-input
            v-model="phone"
            placeholder="手机号"
            prefix-icon="el-icon-mobile-phone"
          >
          </el-input>
          <el-input
            v-model="phonecode"
            placeholder="验证码"
            prefix-icon="el-icon-chat-dot-square"
          >
            <el-button slot="append">发送验证码</el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="border:0px;margin-bottom:0px">
          <el-button
            type="primary"
            style="width:100%"
            round
          >确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "basic",
  data() {
    return {
      nickname: "",
      oldpwd: "",
      newpwd: "",
      ischange: false,
      bindingEmail: false,
      bindingPhone: false,
      email: "",
      emailcode: "",
      phone: "",
      phonecode: "",
    };
  },
};
</script>

<style scoped>
.basic_btn {
  background-color: white;
}
.el-form-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 1.25rem;
}
</style>